.top_title{		/*-----タイトル-----*/
	text-align: center;
	font-size: 55px;
	background: linear-gradient(#83A6CD, #F697A4); 
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	font-family: "Kaisei Decol", serif;
	font-weight: 400;
	font-style: normal;
	
	font-weight: bold;
	position: absolute;
	z-index: 99;
	
	margin-top: 20%;
	filter:drop-shadow(2px 2px 0px white); /*文字に影をつける*/
}

/*-----musicアイコン---*/
.circle {
	width: 1%;
	height: 20%; 
	z-index:99;
	/*z-index: 101;*/
	margin:25% 0 0 13%;
	display:flex;
	position: absolute !important;
	animation: moveSide 5s ease-in-out infinite alternate;
	cursor: pointer;
}

.outline1{/*----概要タイトル-----*/
	font-family: "BIZ UDGothic", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align:center;
	font-size:20px;
	position: absolute;
	z-index: 99;
	width: 150px; /* 円の幅 */
	height: 150px; /* 円の高さ */
	margin: 37% 20% 0 0;
	border-radius:50%;
	color: #223a70;
	background: #fcd2ed;/*背景色*/
	background:rgba(252,210,237,0.8);
	display: flex;
	justify-content: center; /* 水平方向の中央揃え */
	align-items: center;    /* 垂直方向の中央揃え */
}

.outline2{/*----概要-----*/
    font-family: "BIZ UDGothic", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height:30px;
	text-align:left;
	font-size:15px;
	position: absolute;
	z-index: 98;
	width: 370px; /* 円の幅 */
	height: 370px; /* 円の高さ */
	margin-top: 40%;
	border-radius:50%;
	color: #223a70;
	background: #fff7fc;/*背景色*/
	background:rgba(255,247,252,0.7);
	display: flex;
	justify-content: center; /* 水平方向の中央揃え */
	align-items: center;    /* 垂直方向の中央揃え */
}

	
	
/*---footerの場所指定--*/
body {
    display: flex;
    flex-direction: column;
    min-height: 190vh;
}

footer {
    margin-top: auto;
}


	

.top_pic_group{
	width: 200px;
	display: flex;
	justify-content: space-between;
	
	gap: 180px;
}

.top_title_group{
	display: flex;
	justify-content: space-around;
	margin-left: 3%;
}

@keyframes moveSide{
	0%{
		transForm: translateY(0);
	}
	100%{
		transForm: translateY(30px);
	}

}

@keyframes moveSide1{
	0%{
		transForm: translateY(0);
	}
	100%{
		transForm: translateY(20px);
	}

}

@keyframes moveSide2{
	0%{
		transForm: translateY(0);
	}
	50%{
		transForm: translateY(0);
	}
	100%{
		transForm: translateY(20px);
	}

}

@keyframes moveSide3{
	0%{
		transForm: translateY(0);
	}
	50%{
		transForm: translateY(-15px);
	}
	100%{
		transForm: translateY(-15px);
	}

}

@keyframes moveSide4{
	0%{
		transForm: translateY(0);
	}
	70%{
		transForm: translateY(-20px);
	}
	100%{
		transForm: translateY(-20px);
	}

}

/*top写真*/

.top_pic1{
	width: 260px;
	height: 260px;
	
	margin-top: 5%;
	margin-left: 15%;
	animation: moveSide 4s ease-in-out infinite alternate;
	/*position: relative;*/
}

.top_pic2{
	width: 150px;
	height: 150px;
	
	margin-top: 5%;
	margin-left: 45%;
	
	animation: moveSide1 3s ease-in-out infinite alternate;
	/*position: relative;*/
}
.top_pic3{
	width: 220px;
	height: 220px;
	
	margin-top: 25%;
	margin-left: 1%;
	
	animation: moveSide4 5s ease-in-out infinite alternate;
	/*position: relative;*/
}
.top_pic4{
	width: 150px;
	height: 150px;
	
	margin-top: 35%;
	margin-left: 5%;
	
	animation: moveSide3 5s ease-in-out infinite alternate;
	/*position: relative;*/
}

.top_pic5{
	width: 190px;
	height: 190px;
	
	margin-top: 30%;
	margin-left: 40%;
	
	animation: moveSide2 4s ease-in-out infinite alternate;
	/*position: relative;*/
}

.top_pic6{
	width: 280px;
	height: 280px;
	margin-bottom: 25px;
	
	margin-top: 10%;
	margin-left: 1%;
	
	animation: moveSide1 3s ease-in-out infinite alternate;
	/*position: relative;*/
}


.top_group{
	margin-top: 0px;
}

.top_pic1, .top_pic3, .top_pic6{
	margin-bottom: 10px;
	border:5px solid #F697A4;
	border-radius: 140px;
	
	position: absolute;
	z-index: 98;
}

.top_pic2, .top_pic4, .top_pic5{
	border:5px solid #83A6CD;
	border-radius: 140px;
	
	position: absolute;
	z-index: 98;
}

.photo1{
display:none;
}

.photo2{
display:none;
}

.photo3{
display:none;
}




.loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: fadeOut 1.5s 2.5s forwards;
	gap: 10px;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loading__logo {
  opacity: 0;
  animation: logo_fade 2s 0.5s forwards;
  width: 175px;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
  }
}

body{
	background-image: url("../pic2025/n25_dot.png");
}

.loading{
	background-image: url("../pic2025/n25_dot.png");
}

/*--------BGM文章----------*/
.nav-overlay__item{
	text-align:left;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-top:10%;
	margin-right: 5%;
	margin-left: 5%;
	font-family:"BIZ UDGothic", sans-serif;
	line-height: 1.5;
}

.volChou{
	font-family: "BIZ UDGothic",sans-serif;
	}

/*--------ハンバーガーメニュー--------*/
/*位置調整*/

.nav-fade__list{
	margin-top:10%;
}
.nav-fade__list1 .nav-fade__item{
	padding-left:0;
}

/*-----------レスポンシブ対応-----------*/
@media (max-width: 1100px){
	.top_pic1, .top_pic6, .top_pic5{
		display: none;
	}
	
	.top_pic2{
		margin-top: 10%;
		margin-left: 2%;
	}
	.top_pic3{
		margin-top: 35%;
	}
	.top_pic4{
		margin-top: 30%;
		margin-left: 53%;
		width: 180px;
		height: 180px;
	}
	
	.outline1{/*----概要タイトル-----*/
	font-size:13px;
	width: 130px; /* 円の幅 */
 	height: 130px; /* 円の高さ */

}

	.outline2{/*----概要-----*/
	font-size:10px;
	line-height:10px;
	width: 330px; /* 円の幅 */
 	height: 330px; /* 円の高さ */
}

}

@media (max-width: 850px){

	.top_pic4{
		margin-top: 30%;
		margin-left: 38%;
		width: 180px;
		height: 150px;
	}

	.outline1{/*----概要タイトル-----*/
	font-size:13px;
	width: 110px; /* 円の幅 */
 	height: 110px; /* 円の高さ */
 	margin-top:45%;

}

	.outline2{/*----概要-----*/
	font-size:10px;
	width: 250px; /* 円の幅 */
 	height: 250px; /* 円の高さ */
 	margin-top:50%;
}
}

@media (max-width: 730px){

	.top_pic4{
		margin-top: 30%;
		margin-left: 38%;
		width: 180px;
		height: 180px;
	}

	.outline1{/*----概要タイトル-----*/
	font-size:13px;
	width: 110px; /* 円の幅 */
 	height: 110px; /* 円の高さ */
 	margin-top:45%;
 	margin-left:10%;

}

	/*---footerの場所指定--*/
	body {
    display: flex;
    flex-direction: column;
    min-height: 130vh;
	}
}


@media (max-width: 630px){
	.top_title{
		font-size: 35px;
		margin-top: 50%;
	}
	.top_pic2, .top_pic3, .top_pic4{
		display: none;
	}
	
	.pagetop{
		display: none;
	}
	
	/*---footerの場所指定--*/
	body {
    display: flex;
    flex-direction: column;
    min-height: 175vh;
	}
	
	.slider {
		width: 100vw;
		height: 60vh;
		overflow: hidden;
		position: relative;
		max-width: 100%;
	}

	.slider div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		z-index: 10;
		opacity: 0;
		animation-name: slide-fade;
		animation-duration: 15s;
		animation-iteration-count: infinite;
	}

	@keyframes slide-fade {
		0%{
			opacity: 0;
		}
		20%{
			opacity: 1;
		}
		80%{
			opacity: 0;
		}
		100%{
			opacity: 0;
			z-index: 0;
		}
		}
		
	.outline1{/*----概要タイトル-----*/
	font-size:13px;
	width: 110px; /* 円の幅 */
 	height: 110px; /* 円の高さ */
 	margin-top:90%;

}

	.outline2{/*----概要-----*/
	font-size:10px;
	width: 250px; /* 円の幅 */
 	height: 250px; /* 円の高さ */
 	margin-top:99%;
 	margin-left:20%;
}
		
		
	/*1つ目*/
	
	.photo1 {
display: block;
  position: absolute;
  margin-top: 20%;
  margin-left: 3%;
  opacity: 1;
  transition: all 0.8s ease;

}

.photo1 img{
	object-fit:cover;
    width:  150px;
    height: 150px;
    border-radius: 50%;
    background-position: left top;
    border: 3px solid #83A6CD; /* 枠線を付加 */
    animation: moveSide1 3s ease-in-out infinite alternate;
}
    

.photo1.active0 {
  opacity: 0;
}


		
	/*2つ目*/
			.photo2 {
display: block;
  position: absolute;
  margin-top: 50%;
  margin-left:50%;
  opacity: 1;
  transition: all 0.8s ease;

}

.photo2 img{
object-fit:cover;
        width:  180px;
    height: 180px;
    border-radius: 50%;
    background-position: left top;
    border: 3px solid #83A6CD; /* 枠線を付加 */
    animation: moveSide1 3s ease-in-out infinite alternate;
    }
   

.photo2.active1 {
  opacity: 0;
}

		
		
	/*３つ目*/
			.photo3 {
display: block;
  position: absolute;
  margin-top: 85%;
  margin-left: 10%;
  opacity: 1;
  transition: all 0.8s ease;

}

.photo3 img{
object-fit:cover;
        width:  150px;
    height: 150px;
    border-radius: 50%;
    background-position: left top;
    border: 3px solid #F697A4; /* 枠線を付加 */
    animation: moveSide1 3s ease-in-out infinite alternate;
    }
    

.photo3.active2 {
  opacity: 0;
}


}


@media (max-width: 520px){
	/*---footerの場所指定--*/
	body {
    display: flex;
    flex-direction: column;
    max-height: 165vh;
	}
	
	
		.outline1{/*----概要タイトル-----*/
	font-size:8px;
	width: 90px; /* 円の幅 */
 	height: 90px; /* 円の高さ */
 	margin-top:126%;
 	margin-left:24%;

}

	.outline2{/*----概要-----*/
	font-size:8px;
	width: 200px; /* 円の幅 */
 	height: 200px; /* 円の高さ */
 	margin-top:135%;
 	margin-left:26%;
}
}

	
	



.button {
	position: relative;
}

.hamburger-overlay2 {
	background-color: transparent; /* 背景を透明に */
    border: none; /* 枠を削除 */
}


/* キラキラ部分 */
.star {
  position: absolute;
  display: block;
  width: 10px; /* キラキラの横幅を指定 */
  height: 10px; /* キラキラの縦幅を指定 */
 background-image: url("../pic2025/n25_glitter/n25_star-yellow.svg"); /* キラキラの画像のパスを記入 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  animation: button 1s;
  pointer-events: none;
}

/* キラキラが発生するアニメーション */
@keyframes button {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes button1 {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/*
.foot{
	position: relative;
	margin-top: 130%;
}*/

@media (max-width: 390px){
	/*---footerの場所指定--*/
	body {
    min-height: 135vh;
	}
	}
	
	
.kaigyou {
	display: none;
}

@media (max-width: 450px) {
	.kaigyou {
		display: block;
	}
	
	.kaigyou2 {
		display: none;
	}
}
/* 横画面（ランドスケープモード）の場合 */
@media only screen and (orientation: landscape) {
	/*---footerの場所指定--*/
	body {
    display: flex;
    flex-direction: column;
    height: 210vh;
	}
	/*↓BGMハンバーガーメニュースクロールさせる↓*/
	.nav-overlay__list{
		height:100vh;
		overflow-x:hidden;
		overflow-y:scroll;
	}
	/*↓ハンバーガーメニュースクロールさせる↓*/
	.nav-fade__wrapper{
		height:100vh;
		overflow-x:hidden;
		overflow-y:scroll;
	}
	/*ハンバーガーメニューの言語選択を横に並べる*/
	.nav-fade__list1 .nav-fade__item{
		display: inline-block;
		padding-left:15px;
	}
	
}